जावास्क्रिप्ट प्रदर्शन अनुकूलन: कोड स्प्लिटिंग बनाम लेज़ी मूल्यांकन

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    

      Loading...
}>
        
      
    

इस उदाहरण में, OtherComponent केवल तभी लोड होता है जब इसे प्रस्तुत किया जाता है। जब यह लोड हो रहा होता है, तो उपयोगकर्ता को "Loading..." संदेश दिखाई देगा।

कोड स्प्लिटिंग के लिए उपकरण

• Webpack: एक लोकप्रिय मॉड्यूल बंडलर जो विभिन्न कोड स्प्लिटिंग तकनीकों का समर्थन करता है।
• Rollup: एक और मॉड्यूल बंडलर जो छोटे, कुशल बंडल बनाने पर केंद्रित है।
• Parcel: एक शून्य-कॉन्फ़िगरेशन बंडलर जो स्वचालित रूप से कोड स्प्लिटिंग को संभालता है।
• Vite: एक बिल्ड टूल जो तेज़ विकास और अनुकूलित उत्पादन बिल्ड के लिए देशी ES मॉड्यूल का लाभ उठाता है।

लेज़ी मूल्यांकन: गणना को स्थगित करना

लेज़ी मूल्यांकन क्या है?

लेज़ी मूल्यांकन, जिसे स्थगित मूल्यांकन के रूप में भी जाना जाता है, एक प्रोग्रामिंग तकनीक है जहाँ किसी अभिव्यक्ति का मूल्यांकन तब तक विलंबित होता है जब तक कि उसके मूल्य की वास्तव में आवश्यकता न हो। दूसरे शब्दों में, गणनाएँ केवल तभी की जाती हैं जब उनके परिणामों की आवश्यकता होती है, बजाय इसके कि उन्हें पहले से ही उत्सुकता से गणना की जाए।

कल्पना कीजिए कि आप एक बहु-कोर्स भोजन तैयार कर रहे हैं। आप हर व्यंजन को एक साथ नहीं पकाएंगे। इसके बजाय, आप प्रत्येक व्यंजन को केवल तभी तैयार करेंगे जब उसे परोसने का समय हो। लेज़ी मूल्यांकन इसी तरह काम करता है, गणना केवल तभी करता है जब उनके परिणामों की आवश्यकता होती है।

लेज़ी मूल्यांकन कैसे काम करता है

जावास्क्रिप्ट में, लेज़ी मूल्यांकन को विभिन्न तकनीकों का उपयोग करके लागू किया जा सकता है:

• फ़ंक्शंस: किसी अभिव्यक्ति को फ़ंक्शन में लपेटने से आप उसके मूल्यांकन को तब तक स्थगित कर सकते हैं जब तक कि फ़ंक्शन को कॉल नहीं किया जाता है।
• जेनरेटर: जेनरेटर पुनरावर्तक बनाने का एक तरीका प्रदान करते हैं जो मांग पर मान उत्पन्न करते हैं।
• मेमोइज़ेशन: मेमोइज़ेशन में महंगे फ़ंक्शन कॉल के परिणामों को कैश करना और जब वही इनपुट फिर से होते हैं तो कैश्ड परिणाम लौटाना शामिल है।
• प्रॉक्सी: प्रॉक्सी का उपयोग संपत्ति पहुंच को रोकने और संपत्ति मूल्यों की गणना को तब तक स्थगित करने के लिए किया जा सकता है जब तक कि वे वास्तव में एक्सेस नहीं किए जाते हैं।

लेज़ी मूल्यांकन के लाभ

• बेहतर प्रदर्शन: अनावश्यक गणनाओं को स्थगित करके, लेज़ी मूल्यांकन प्रदर्शन में काफी सुधार कर सकता है, खासकर जब बड़े डेटासेट या जटिल गणनाओं से निपटते हैं।
• कम मेमोरी उपयोग: लेज़ी मूल्यांकन उन मध्यवर्ती मूल्यों के निर्माण से बचकर मेमोरी उपयोग को कम कर सकता है जिनकी तुरंत आवश्यकता नहीं होती है।
• बढ़ी हुई प्रतिक्रियाशीलता: प्रारंभिक लोड के दौरान अनावश्यक गणनाओं से बचकर, लेज़ी मूल्यांकन एप्लिकेशन की प्रतिक्रियाशीलता को बढ़ा सकता है।
• अनंत डेटा संरचनाएं: लेज़ी मूल्यांकन आपको अनंत डेटा संरचनाओं, जैसे अनंत सूचियों या धाराओं के साथ काम करने की अनुमति देता है, केवल मांग पर आवश्यक तत्वों की गणना करके।

उदाहरण: लेज़ी लोडिंग छवियां

लेज़ी मूल्यांकन के लिए एक सामान्य उपयोग का मामला छवियों को लेज़ी लोड करना है। एक पृष्ठ पर सभी छवियों को एक साथ लोड करने के बजाय, आप उन छवियों को लोड करना स्थगित कर सकते हैं जो शुरू में व्यूपोर्ट में दिखाई नहीं दे रही हैं। यह प्रारंभिक पृष्ठ लोड समय में काफी सुधार कर सकता है और नेटवर्क बैंडविड्थ की खपत को कम कर सकता है।

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  images.forEach((img) => {
    observer.observe(img);
  });
}

document.addEventListener('DOMContentLoaded', lazyLoadImages);

यह उदाहरण IntersectionObserver API का उपयोग यह पता लगाने के लिए करता है कि कोई छवि व्यूपोर्ट में कब प्रवेश करती है। जब कोई छवि दिखाई देती है, तो उसका src एट्रिब्यूट उसके data-src एट्रिब्यूट के मान पर सेट हो जाता है, जिससे छवि लोड हो जाती है। फिर ऑब्जर्वर छवि को अनऑब्जर्व करता है ताकि उसे फिर से लोड होने से रोका जा सके।

उदाहरण: मेमोइज़ेशन

मेमोइज़ेशन का उपयोग महंगे फ़ंक्शन कॉल को अनुकूलित करने के लिए किया जा सकता है। यहाँ एक उदाहरण है:

function memoize(func) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = func(...args);
    cache[key] = result;
    return result;
  };
}

function expensiveCalculation(n) {
  // Simulate a time-consuming calculation
  for (let i = 0; i < 100000000; i++) {
    // Do something
  }
  return n * 2;
}

const memoizedCalculation = memoize(expensiveCalculation);

console.time('First call');
console.log(memoizedCalculation(5)); // First call - takes time
console.timeEnd('First call');

console.time('Second call');
console.log(memoizedCalculation(5)); // Second call - returns cached value instantly
console.timeEnd('Second call');

इस उदाहरण में, memoize फ़ंक्शन इनपुट के रूप में एक फ़ंक्शन लेता है और उस फ़ंक्शन का एक मेमोइज़्ड संस्करण लौटाता है। मेमोइज़्ड फ़ंक्शन पिछले कॉलों के परिणामों को कैश करता है, ताकि समान तर्कों के साथ बाद के कॉल मूल फ़ंक्शन को फिर से निष्पादित किए बिना कैश्ड परिणाम लौटा सकें।

कोड स्प्लिटिंग बनाम लेज़ी मूल्यांकन: मुख्य अंतर

हालांकि कोड स्प्लिटिंग और लेज़ी मूल्यांकन दोनों शक्तिशाली अनुकूलन तकनीकें हैं, वे प्रदर्शन के विभिन्न पहलुओं को संबोधित करते हैं:

• कोड स्प्लिटिंग: कोड को छोटे टुकड़ों में विभाजित करके और उन्हें मांग पर लोड करके प्रारंभिक बंडल आकार को कम करने पर केंद्रित है। इसका उपयोग मुख्य रूप से प्रारंभिक पृष्ठ लोड समय में सुधार के लिए किया जाता है।
• लेज़ी मूल्यांकन: मूल्यों की गणना को तब तक स्थगित करने पर केंद्रित है जब तक कि उनकी वास्तव में आवश्यकता न हो। इसका उपयोग मुख्य रूप से महंगी गणनाओं या बड़े डेटासेट से निपटने के दौरान प्रदर्शन में सुधार के लिए किया जाता है।

संक्षेप में, कोड स्प्लिटिंग उस कोड की मात्रा को कम करता है जिसे पहले डाउनलोड करने की आवश्यकता होती है, जबकि लेज़ी मूल्यांकन उस गणना की मात्रा को कम करता है जिसे पहले करने की आवश्यकता होती है।

कोड स्प्लिटिंग बनाम लेज़ी मूल्यांकन का उपयोग कब करें

कोड स्प्लिटिंग

• बड़े एप्लिकेशन: जावास्क्रिप्ट कोड की एक बड़ी मात्रा वाले एप्लिकेशन के लिए कोड स्प्लिटिंग का उपयोग करें, विशेष रूप से कई रूट या सुविधाओं वाले एप्लिकेशन।
• प्रारंभिक लोड समय में सुधार: प्रारंभिक पृष्ठ लोड समय में सुधार करने और इंटरैक्टिव होने के समय को कम करने के लिए कोड स्प्लिटिंग का उपयोग करें।
• नेटवर्क बैंडविड्थ को कम करना: नेटवर्क पर स्थानांतरित किए जाने वाले डेटा की मात्रा को कम करने के लिए कोड स्प्लिटिंग का उपयोग करें।

लेज़ी मूल्यांकन

• महंगी गणनाएँ: उन फ़ंक्शन के लिए लेज़ी मूल्यांकन का उपयोग करें जो महंगी गणनाएँ करते हैं या बड़े डेटासेट तक पहुँचते हैं।
• प्रतिक्रियाशीलता में सुधार: प्रारंभिक लोड के दौरान अनावश्यक गणनाओं को स्थगित करके एप्लिकेशन की प्रतिक्रियाशीलता में सुधार करने के लिए लेज़ी मूल्यांकन का उपयोग करें।
• अनंत डेटा संरचनाएं: अनंत डेटा संरचनाओं, जैसे अनंत सूचियों या धाराओं के साथ काम करते समय लेज़ी मूल्यांकन का उपयोग करें।
• लेज़ी लोडिंग मीडिया: पृष्ठ लोड समय में सुधार के लिए छवियों, वीडियो और अन्य मीडिया संपत्तियों के लिए लेज़ी लोडिंग लागू करें।

कोड स्प्लिटिंग और लेज़ी मूल्यांकन का संयोजन

कई मामलों में, कोड स्प्लिटिंग और लेज़ी मूल्यांकन को और भी अधिक प्रदर्शन लाभ प्राप्त करने के लिए जोड़ा जा सकता है। उदाहरण के लिए, आप अपने एप्लिकेशन को छोटे टुकड़ों में विभाजित करने के लिए कोड स्प्लिटिंग का उपयोग कर सकते हैं और फिर उन टुकड़ों के भीतर मूल्यों की गणना को स्थगित करने के लिए लेज़ी मूल्यांकन का उपयोग कर सकते हैं।

एक ई-कॉमर्स एप्लिकेशन पर विचार करें। आप एप्लिकेशन को उत्पाद लिस्टिंग पृष्ठ, उत्पाद विवरण पृष्ठ और चेकआउट पृष्ठ के लिए अलग-अलग बंडलों में विभाजित करने के लिए कोड स्प्लिटिंग का उपयोग कर सकते हैं। फिर, उत्पाद विवरण पृष्ठ के भीतर, आप छवियों की लोडिंग या उत्पाद अनुशंसाओं की गणना को तब तक स्थगित करने के लिए लेज़ी मूल्यांकन का उपयोग कर सकते हैं जब तक कि उनकी वास्तव में आवश्यकता न हो।

कोड स्प्लिटिंग और लेज़ी मूल्यांकन से परे: अतिरिक्त अनुकूलन तकनीकें

हालांकि कोड स्प्लिटिंग और लेज़ी मूल्यांकन शक्तिशाली तकनीकें हैं, वे जावास्क्रिप्ट प्रदर्शन अनुकूलन की पहेली के केवल दो टुकड़े हैं। यहाँ कुछ अतिरिक्त तकनीकें हैं जिनका उपयोग आप प्रदर्शन को और बेहतर बनाने के लिए कर सकते हैं:

• मिनिफिकेशन: अपने कोड से अनावश्यक वर्णों (जैसे, व्हाइटस्पेस, टिप्पणियां) को हटाकर उसका आकार कम करें।
• संपीड़न: अपने कोड को Gzip या Brotli जैसे उपकरणों का उपयोग करके संपीड़ित करें ताकि उसका आकार और कम हो सके।
• कैशिंग: अपने सर्वर पर अनुरोधों की संख्या को कम करने के लिए ब्राउज़र कैशिंग और CDN कैशिंग का लाभ उठाएं।
• ट्री शेकिंग: अपने बंडलों से अप्रयुक्त कोड को हटाकर उनका आकार कम करें।
• छवि अनुकूलन: छवियों को संपीड़ित करके, उन्हें उपयुक्त आयामों में आकार देकर, और WebP जैसे आधुनिक छवि प्रारूपों का उपयोग करके अनुकूलित करें।
• डिबाउंसिंग और थ्रॉटलिंग: प्रदर्शन समस्याओं को रोकने के लिए ईवेंट हैंडलर के निष्पादन की दर को नियंत्रित करें।
• कुशल DOM हेरफेर: DOM हेरफेर को कम करें और कुशल DOM हेरफेर तकनीकों का उपयोग करें।
• वेब वर्कर्स: कम्प्यूटेशनल रूप से गहन कार्यों को वेब वर्कर्स को ऑफ़लोड करें ताकि उन्हें मुख्य थ्रेड को ब्लॉक करने से रोका जा सके।

निष्कर्ष

जावास्क्रिप्ट प्रदर्शन अनुकूलन एक सकारात्मक उपयोगकर्ता अनुभव प्रदान करने और व्यावसायिक लक्ष्यों को प्राप्त करने का एक महत्वपूर्ण पहलू है। कोड स्प्लिटिंग और लेज़ी मूल्यांकन दो शक्तिशाली तकनीकें हैं जो प्रारंभिक लोड समय को कम करके, नेटवर्क बैंडविड्थ की खपत को कम करके, और अनावश्यक गणनाओं को स्थगित करके प्रदर्शन में काफी सुधार कर सकती हैं। यह समझकर कि ये तकनीकें कैसे काम करती हैं और उनका उपयोग कब करना है, आप तेज़, अधिक प्रतिक्रियाशील और अधिक सुखद वेब एप्लिकेशन बना सकते हैं।

अपनी विशिष्ट एप्लिकेशन आवश्यकताओं पर विचार करना याद रखें और उन तकनीकों का उपयोग करें जो आपकी आवश्यकताओं के लिए सबसे उपयुक्त हैं। अपने एप्लिकेशन के प्रदर्शन की लगातार निगरानी करें और अपनी अनुकूलन रणनीतियों पर पुनरावृति करें ताकि यह सुनिश्चित हो सके कि आप सर्वोत्तम संभव उपयोगकर्ता अनुभव प्रदान कर रहे हैं। कोड स्प्लिटिंग और लेज़ी मूल्यांकन की शक्ति को अपनाएं ताकि ऐसे वेब एप्लिकेशन बनाए जा सकें जो न केवल सुविधा संपन्न हों, बल्कि प्रदर्शनकारी और दुनिया भर में उपयोग करने में आनंददायक भी हों।

आगे सीखने के संसाधन

• Webpack दस्तावेज़ीकरण: https://webpack.js.org/
• Rollup दस्तावेज़ीकरण: https://rollupjs.org/guide/en/
• Vite दस्तावेज़ीकरण: https://vitejs.dev/
• MDN वेब डॉक्स - Intersection Observer API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• Google डेवलपर्स - जावास्क्रिप्ट निष्पादन का अनुकूलन करें: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/